<template>
  <div>
    <div>
      <van-nav-bar
        title="订单等待支付页"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div v-for="(item, index) in store.order" :key="index">
      <van-card
        :num="item.num"
        :price="item.discount"
        :title="item.title"
        :thumb="item.img"
      />
    </div>
    <div>
      <van-submit-bar :price="sumPice" button-text="支付" @submit="onOrder">
        剩余:
        <van-count-down millisecond :time="times" format="HH:mm:ss:SS" />
      </van-submit-bar>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { ref, onMounted } from "vue";
import { useCounterStore } from "../../pinia/index";
import { useRouter } from "vue-router";
import instance from "../../axios/index";
import { showToast } from "vant";
const router = useRouter(); // 获取路由
const times = ref(); // 声明一个倒计时
const store = useCounterStore(); // 获取pinia中的数据
const OrderList = ref([]); // 获取订单列表
OrderList.value = store.order; // 获取购物车页面要付款的商品列表

// 获取我点击放弃支付的时间
const usedtime = localStorage.getItem("usedtime");

// 声明一个我多长时间过期的时间节点30 * 60 * 1000;
const thirtyMinutesInMs = 30 * 60 * 1000;
// 用我点击放弃支付的时间加上我多长时间过期的时间节点 = 得出来的就是我什么时候过期
const newTime = Number(usedtime) + Number(thirtyMinutesInMs);
// @ts-ignore
localStorage.setItem("newTime", newTime);

// 实时获取我现在的时间
const time = new Date();
// 获取我存储的什么时间过期
const SetnewTime = localStorage.getItem("newTime");
// 用过期时间减去我现在的时间 = 得出来的就是我还有多久过期
times.value = Number(SetnewTime) - Number(time);
// 订单没有超时可以支付   计算订单的总价格
// @ts-ignore
const sumPice = store.order.reduce((total, item) => {
  const validPrice = Number(item.discount);
  const validNum = Number(item.num);
  return total + validPrice * validNum * 100;
}, 0);

setTimeout(() => {
  // 自动设置订单超时删除重新下单
  showToast("订单已超时,请重新下单,已返回购物车");
  // 删除我存储的点击的时间
  localStorage.removeItem("usedtime");
  // 删除我存储的过期时间
  localStorage.removeItem("newTime");
  // 将我存储的订单列表清空
  store.order = [];
  // 返回购物车页面
  router.go(-1);
}, times.value);
// 返回上一页 放弃支付
const onClickLeft = () => {
  showToast("已取消该次订单");
  // 删除我存储的点击的时间
  localStorage.removeItem("usedtime");
  // 删除我存储的过期时间
  localStorage.removeItem("newTime");
  // 将我存储的订单列表清空
  store.order = [];
  router.go(-1);
};
// 点击支付
const onOrder = () => {
  if (times.value < 0) {
    showToast("订单已超时,请重新下单");
    // 删除我存储的点击的时间
    localStorage.removeItem("usedtime");
    // 删除我存储的过期时间
    localStorage.removeItem("newTime");
    // 将我存储的订单列表清空
    store.order = [];
    router.go(-1);
  } else {
    // 声明我支付的id 喝订单页要付款的价格
    let data = {
      id: Math.random().toString(36).substr(2),
      price: sumPice,
    };
    // 调用支付接口
    instance.get("/api/pay", { params: data }).then((res) => {
      window.open(res.data.data);
    });
  }
};
</script>
<style lang="scss" scoped>
</style>